<--
elementui的table组件在列组件更新的时候会刷新这个表格
每个组件实例都会重新创建一次，会重新经过created和mounted方法
经过测试，没有这个情况,框架组分析原来是自定义组件的key使用uuid
每次刷新组件后会生成新的key导致实例重新创建一次
-->
<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="test1" label="htmlInput">
        <template slot-scope="scope">
          <input v-model="scope.row.test1">
        </template>
      </el-table-column>
      <el-table-column prop="test2" label="EleUIInput">
        <template slot-scope="scope">
          <el-input v-model="scope.row.test2"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="select1" label="下拉">
        <template slot-scope="scope">
          <el-select v-model="scope.row.select1" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="test3" label="自定义">
        <template slot-scope="scope">
          <CustomComp
            v-model="scope.test3"
          ></CustomComp>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
import CustomComp from "@/components/table/Demo01/CustomComp01.vue"
export default {
  name:"TableDemo1",
  components:{CustomComp},
  data() {
    return {
      options:[
        {
          "label":"label1",
          "value":"label1"
        },
        {
          "label":"label2",
          "value":"label2"
        }
      ],
      tableData:[
        {
          "test1":"test1",
          "test2":"我是第二列第一行",
          "test3":"tyttttt",
          "select1":"label1"
        },
        {
          "test1":"test2",
          "test2":"我是第二列第二行",
          "test3":"tyttttt",
          "select1":"label2"
        }
      ]
    }
  },
  method:{
    handleEdit(index,row) {

    }
  }
}
</script>

<style>

</style>